<template>
  <div class="app-container">
    <el-card>
      <div class="flex justify-between">
        <div class="flex">
          <el-input
            v-model="bankName"
            style="width: 220px"
            clearable
            placeholder="请输入银行卡名称进行搜索"
          />
          <el-button class="ml-10" type="primary" @click="search"> 搜索 </el-button>
        </div>
        <el-button type="primary" @click="addCard">新建银行卡</el-button>
      </div>
      <div class="mt-20">
        <PageTable :columns="columns" :data="dataSource" />
        <Pagination
          v-show="total > 0"
          :total="total"
          :pageNo.sync="listQuery.pageNo"
          :pageSize.sync="listQuery.pageSize"
          @pagination="getList"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'BrankCardList',
  props: {},
  data() {
    return {
      bankName: '',
      columns: [
        {
          label: '银行卡logo',
          render: (h, { row }) => {
            return <img src={row.icon} style={'width: 60px;height: 60px;border-radius: 50%;'} />
          }
        },
        {
          prop: 'bankName',
          label: '银行卡名称'
        },
        {
          label: '银行卡背景',
          render: (h, { row }) => {
            return <img src={row.backgroundImage} style={'width: 100%;height: 60px;'} />
          }
        },
        {
          prop: 'status',
          label: '是否显示',
          render: (h, { row }) => {
            return <span>{row.status ? '是' : '否'}</span>
          }
        },
        {
          prop: 'sort',
          label: '排序'
        },
        {
          prop: 'createdAt',
          label: '创建时间'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                {row.status ? (
                  <el-button
                    type="text"
                    onClick={() => this.updateStatus({ id: row.id, state: !row.status })}
                  >
                    隐藏
                  </el-button>
                ) : (
                  <el-button
                    type="text"
                    onClick={() => this.updateStatus({ id: row.id, state: !row.status })}
                  >
                    显示
                  </el-button>
                )}
                <el-button type="text" onClick={() => this.update(row.id)}>
                  编辑
                </el-button>
                {row.status ? (
                  ''
                ) : (
                  <el-button type="text" onClick={() => this.delete(row.id)}>
                    删除
                  </el-button>
                )}
              </div>
            )
          }
        }
      ],
      total: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      dataSource: []
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    async getList() {
      const params = {
        ...this.listQuery
      }
      if (this.bankName) params.bankName = this.bankName
      const {
        data: { list, total }
      } = await this.$http.bank.getList({ params })
      this.dataSource = list
      this.total = total
      this.loading = false
    },
    // 更新状态
    updateStatus({ id, state }) {
      let message = state ? '显示' : '隐藏'
      const update = async () => {
        const { status } = await this.$http.bank.updateStatus({ id, status: state ? 1 : 0 })
        if (status === 200) {
          this.$message.success(`已${message}`)
          this.getList()
        }
      }
      if (state) {
        update()
      } else {
        this.$handleConfirm({ message: `确定${message}吗？` }).then(async () => {
          update()
        })
      }
    },
    // 删除
    async delete(id) {
      this.$handleConfirm({ message: '确认删除吗？' }).then(async () => {
        const { status } = await this.$http.bank.delete(id)
        if (status === 200) {
          this.$message.success('已删除！')
          if (this.dataSource.length == 1 && this.listQuery.pageNo > 1) {
            this.listQuery.pageNo--
          }
          this.getList()
        }
      })
    },
    // 编辑
    update(id) {
      this.$router.push({
        path: '/operation/pay_center/edit_bank_card',
        query: { id, type: 'update' }
      })
    },
    addCard() {
      this.$router.push({ name: 'AddBankCard' })
    },
    search() {
      this.listQuery.pageNo = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped></style>
